<template>
    <div id="shoppingCart">
        <div id="allcontent">
            <div id="head">
                <div id="headbox">
                    <div id="headTop"><!--当前的位置-->
                        <div>
                            <i></i>
                            <span>南京市</span>
                            <span>(当前位置)</span>
                        </div>
                    </div>
                    <div id="information"><!--商品的店铺和商品-->
                        <div>
                            <router-link to="/goods" id="a">
                                <div>
                                    <span>沃尔玛-新街口店</span>
                                    <i></i>
                                </div>                               
                                <div>
                                   <ul>
                                       <li>
                                            <img src="../image/shopping/d4eca6c8dbf5506e.jpg" alt="">
                                            <span>￥4.3</span>
                                       </li>
                                   </ul>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Navs active="iocn-nav3" active1="iocn-nav3"></Navs> 
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style lang="scss" scoped>
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }
    #allcontent{
        width:750px;
        //height:1334px;
        background-color:rgb(248, 247, 247);
        border:1px solid rgb(248, 247, 247);

        #head{
            width:750px;
            height:638px;

            #headbox{
                width:750px;
                height:440px;
                padding-bottom:198px;
                //当前位置
                #headTop{
                    width:290px;
                    height:44px;
                    padding:12px 14px;
                    margin:30px auto 20px;
                    border-radius:50px;
                    background-color:rgb(224, 220, 220);

                    div{
                        width:290px;
                        height:44px;
                        border-radius:50px;
                        background-color:#47b34f;
                        position: relative;
                        display:flex;
                        justify-content:flex-end;
                        
                        i{
                            display:block;
                            width:24px;
                            height:26px;
                            position:absolute;
                            left:18px;
                            top:10px;
                            background-image:url(../image/home/headTop_left.png);
                            background-repeat:no-repeat; 
                            background-size:100% 100%;                           
                        }
                        span:nth-of-type(1){
                            width:84px;
                            height:44px;
                            display:block;
                            font-size:28px;
                            color:#fff;
                            line-height:44px;
                            white-space:nowrap;
                        }
                        span:nth-of-type(2){
                            width:116px;
                            height:44px;
                            display:block;
                            padding:0 22px 0 4px;
                            font-size:24px;
                            color:#fff;
                            line-height:44px;
                            white-space:nowrap;
                        }
                    }
                }
                //商品的店铺和商品
                #information{
                    width:684px;
                    height:282px;
                    padding:6px 20px 12px 20px;
                    margin:0 12px 14px 12px;
                    background-color:#fff;

                    div{
                        width:668px;
                        height:274px;
                        //padding-left:16px;

                         #a{
                            width:668px;
                            height:294px;
                            display:block;
                            
                            //店铺名称和箭头
                            div:nth-of-type(1){
                                width:684px;
                                height:110px;
                                display:flex;
                                justify-content:space-between;

                                span{
                                    display:block;
                                    width:628px;
                                    height:110px;
                                    font-size:28px;
                                    color:#333;
                                    line-height:110px;
                                }
                                i{
                                    display:block;
                                    width:20px;
                                    height:110px;
                                    background-image:url(../image/order/icon_arrow_down.png);
                                    background-repeat:no-repeat;
                                    background-size:15px 20px;
                                    margin-top:45px;
                                }
                            }
                            //商品图片和价格
                            div:nth-of-type(2){
                                width:684px;
                                height:184px;
                                border-top:2px solid rgb(240, 237, 237);

                                ul{
                                   width:668px;
                                   height:194px;

                                   li{
                                      display:block;
                                      width:106px;
                                      height:166px;
                                      padding:0 64px 198px 0;
                                      margin-top:20px;

                                      img{
                                            display:block;
                                            width:106px;
                                            height:106px;
                                            background-repeat:no-repeat;
                                            background-size:100% 100%;
                                      }
                                      span{
                                          display:block;
                                          width:106px;
                                          height:60px;
                                          font-size:24px;
                                          text-align:center;
                                          line-height:60px;
                                          color:#333;
                                      } 
                                   }
                                }
                            }                        
                         }
                    }
                }
            }
        }
    }
</style>


